<template>
    <div>
        <div class="user">
            <!-- <table border="1"> -->
             <!-- <tr> -->
            <div class="table">
                <span class="left">用户名称：</span>
                <span class="right">{{$store.state.UserName}}</span>
            </div>
            <!-- </tr> -->
            <!-- </table> -->
            <div>
                <span class="left">密码：</span>
                <Button class="right" size="small" @click="isShow=true">重置密码</Button>
            </div>
            <div v-if="isShow">
                <div>
                    <p>登录密码：</p>
                    <Input size="small" class="input" v-model="password" type="password"></Input>
                </div>
                <div>
                    <p>新密码：</p>
                    <Input size="small" class="input" v-model="newpassword" type="password"></Input>
                </div>
                <div>
                    <p>重复新密码：</p>
                    <Input size="small" class="input" v-model="repeat" type="password"></Input>
                </div>
                <Button class="btn" @click="editPass">确认</Button>
            </div>
            <div class="table">
                <span class="left">微信：</span>
                <span class="right">{{$store.state.WeChat?$store.state.WeChat:"无"}}</span>
            </div>
            <div class="table">
                <span class="left">手机号：</span>
                <span class="right">{{$store.state.phone?$store.state.phone:"无"}}</span>
            </div>
            <div class="table">
                <span class="left">部门：</span>
                <span class="right">{{$store.state.department?$store.state.department:"无"}}</span>
            </div>
            <div class="table">
                <span class="left">职位：</span>
                <span class="right">{{$store.state.job?$store.state.job:"无"}}</span>
            </div>
            <div class="table">
                <span class="left">邮箱：</span>
                <span class="right">{{$store.state.mail?$store.state.mail:"无"}}</span>
            </div class="table">
            <div style="margin:0px;padding:10px 0">
                <span class="left">收货地址：</span>
                <span class="right">{{$store.state.address?$store.state.address:"无"}}</span>
            </div>
        </div>
    </div>
</template>

<script>
import http from "../../http/http";
export default {
    data() {
        return {
            // 如果有用户查询接口就换成请求
            isShow: false,
            password: "",
            newpassword: "",
            repeat: ""
        };
    },
    created() {
        console.log(this.$store.state.phone);
        console.log(this.$store.state);
    },
    methods: {
        editPass() {
            console.log(this.password);
            console.log(this.newpassword);
            console.log(this.repeat);
            console.log(this.$store.state.userId);

            if (this.newpassword.length >= 5 && this.password.length >= 5) {
                if (this.repeat == this.newpassword) {
                    console.log(this.$store.state);
                    http.post("/user/updatePwd", {
                        id: this.$store.state.userId,
                        newPassword: this.newpassword,
                        password: this.password
                    }).then(data => {
                        if (data.code == 200) {
                            this.$Message.info("密码更改成功");
                        }
                    });
                } else {
                    this.$Message.warning("您的新密码两次输入不一样");
                }
            } else {
                this.$Message.warning("您的密码长度不足5位");
            }
        }
    }
};
</script>

<style lang="less" scoped>
.user {
    width: 400px;
    margin-left: 30px;
    font-size: 14px;
    border: 1px solid rgba(196, 196, 196,10%);
    box-shadow: 1px 1px 5px rgba(133, 192, 240,50%);
    padding: 35px 50px 25px 50px;
    >div {
        margin: 16px 0px;
        &.table{
            padding: 10px 0;
            margin: 0px 0px;
            border-bottom: 1px solid rgb(180, 180, 180);
        }
    }
    
}

.right {
    float: right;
}
.input {
    width: 130px;
}
.btn{
    margin: 15px 0;
}

</style>